<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="时间" prop="createDate">
          <el-date-picker
            v-model="queryForm.createDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="危化品" prop="nameOrNum">
          <el-input v-model="queryForm.nameOrNum" placeholder="请输入危化品名称或编号" clearable />
        </el-form-item>
        <el-form-item
          label="仓库"
          prop="storageId"
        >
          <el-select
            v-model="queryForm.storageId"
            placeholder="请选择仓库"
            filterable
            clearable
          >
            <el-option
              v-for="item in storageIdData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>

      <div class="base-content-operate">
        <el-button
          type="primary"
          icon="el-icon-document-copy"
          @click="exportData"
          >导出</el-button
        >
      </div>

      <el-table
        :data="list"
        height="calc(100% - 130px)"
        style="width: 100%"
      >
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="危化品编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="危化品名称">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column label="变更前库存">
          <template slot-scope="scope">
            {{ scope.row.beforeAmount }}
          </template>
        </el-table-column>
        <el-table-column label="库存变更">
          <template slot-scope="scope">
            {{ scope.row.flag }}{{ scope.row.changeAmount }}
          </template>
        </el-table-column>
        <el-table-column label="变更后库存">
          <template slot-scope="scope">
            {{ scope.row.afterAmount }}
          </template>
        </el-table-column>
        <el-table-column label="关联单据号">
          <template slot-scope="scope">
            {{ scope.row.orderNum }}
          </template>
        </el-table-column>
        <el-table-column label="操作人">
          <template slot-scope="scope">
            {{ scope.row.operUserName }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getStorageList } from "../../../api/Storage/StorageOrderIn.js";
import { getList } from "../../../api/Storage/StorageStatistics.js";

export default {
  name: "StorageStatisticsList",
  data() {
    return {
      loading: true,
      list: [],
      storageIdData: [],
      queryForm: {
        createDate: [],
        nameOrNum: '',
        storageId: null
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    async init() {
      await this.getStorageOptions();
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          this.storageIdData = res.data.dataList;
          resolve();
        });
      })
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      const { createDate, ...queryForm } = this.queryForm
      getList({
        ...queryForm,
        startCreateTime: Array.isArray(createDate) ? createDate[0] : '',
        endCreateTime: Array.isArray(createDate) ? createDate[1] : '',
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      })
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList.map(item => {
            return {
              ...item,
              flag: item.afterAmount > item.beforeAmount ? '+' : ''
            }
          }) : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
    // 导出
    exportData() {
      var list = []
      const { createDate, ...queryForm } = this.queryForm
      getList({
        ...queryForm,
        startCreateTime: Array.isArray(createDate) ? createDate[0] : '',
        endCreateTime: Array.isArray(createDate) ? createDate[1] : '',
        pageIndex: 1,
        pageSize: 1000000
      }).then((res) => {
        list = res.data.dataList ? res.data.dataList : [];
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "仓库",
            "危化品编号",
            "危化品名称",
            "型号规格",
            "包装单位",
            "变更前库存",
            "库存变更",
            "变更后库存",
            "关联单据号",
            "操作人",
            "操作时间",
          ];
          const filterVal = [
            "storageName",
            "productNum",
            "name",
            "specifications",
            "unitName",
            "beforeAmount",
            "changeAmount",
            "afterAmount",
            "orderNum",
            "operUserName",
            "updateTime",
          ];
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: "危化品出入库统计信息", // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>
